@extends('layouts.appDomain')
@section('style')
    <style>
        iframe{
            width: 100%;
            height: 200px;
        }
        .item{
            margin-top: 25px;
        }
        .item.fullPage{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            margin-top: 0;
        }
        .item.fullPage iframe{
            height: 100%;
        }
        .item.fullPage .ctrl button{
            position: fixed;
            top: 10px;
            right: 10px;
        }

        body.fullPage{
            overflow: hidden;
        }

        @media screen and (max-width: 768px) {
            .item .ctrl button{
                display: none;
            }
        }

    </style>
@endsection

@section('script')
    <script>
        $(document).ready(function () {
            $('.fullPage_btn').click(function () {
                var id =$(this).attr('data');
                $('body').toggleClass('fullPage');
                $('#v_'+id).toggleClass('fullPage');
                //btn-sm
                // $('.item.fullPage .ctrl button')
                //     .toggleClass('btn-sm')
                //     .html($('.item.fullPage .ctrl button').html()=='全屏'?'退出':'全屏');
            })
        })
    </script>
@endsection

@section('content')

<div class="container mt-5">



    <h1>游戏视频</h1>
    @if($list)


        <div class="row">
            @foreach($list as $item)
                <div class="col-sm-6 col-md-6 col-lg-4 col-xl-4">
                    <div id="v_{{$item->id}}" class="item">
                        {!! $item->url !!}
                        <div class="ctrl">
                            <button type="button" data="{{$item->id}}" class="btn btn-primary float-right fullPage_btn btn-sm">全屏</button>
                            <h5>{{$item->title}}</h5>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>




        <div class="mt-5">
            {{ $list->links() }}
        </div>
    @else
        <div class="alert alert-secondary" role="alert">
            暂时没有游戏视频
        </div>
    @endif

</div>
@endsection